<template>
  <el-dialog title="分配角色" :visible='showRoleDialog' @close='btnCancel'>
    <!-- 复选框组 -->
    <el-checkbox-group v-model="roleIds">
      <!-- 选项 label表示要存储的值-->
      <el-checkbox v-for="item in list" :key="item.id" :label='item.id'>{{item.name}}</el-checkbox>
    </el-checkbox-group>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>  
  </el-dialog>
</template>

<script>
import {getRoleList} from '@/api/setting'
import {getUserDetailById} from '@/api/user'
import {assignRoles} from '@/api/employee'
export default {
    data () {
        return {
           list:[] , //负责存储当前的所有角色id
           roleIds: [] //这个数组负责存储当前用户所拥有的角色id
        }
    },
    props: {
        showRoleDialog:{
            type: Boolean,
            default: false
        },
        // 用户的id 用来查询当前用户的角色信息
        userId: {
            type: String, 
            default: null
        }
    },
    created () {
        // 获取所有角色
        this.getRoleList()
    },
    methods: {
       async getRoleList(){
         //要循环的记录 
          const {rows} = await getRoleList({page:1, pagesize:20}) //默认值取十条数据     
          this.list = rows
        },
        // 这个方法是点击角色的时候就要调用，这里要用到id props传递id是异步的，所以这里不能用this.userId，因为调用不到
        // 这个方法是给父组件调用的
        async getUserDetailById(id){
              const {roleIds} = await getUserDetailById(id) //将用户所拥有的角色赋值给当前用户的对象
              this.roleIds = roleIds
        },
        async btnOK(){
          try {
            // console.log(this.userId);
            // console.log(this.roleIds);
            await assignRoles({id:this.userId, roleIds:this.roleIds}) //保存用户的角色
            this.$message.success('修改角色成功')
            this.$emit('update:showRoleDialog',false)
            
          } catch (error) {
            console.log(error);
          }
        },
        btnCancel(){
         this.roleIds = [] // 清空原来的数组
         this.$emit('update:showRoleDialog',false)
        }
    }
}
</script>

<style>

</style>